<template>
  <a-modal
    :title="formTile + '物料颜色'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="form"
          :rules="rules"
        >
          <a-form-model-item
            label="颜色编号"
            prop="code"
          >
            <a-input
              placeholder="请输入颜色编号"
              v-model="form.code"
            />
          </a-form-model-item>
          <a-form-model-item
            label="颜色名称"
            prop="name"
          >
            <a-input
              placeholder="请输入颜色名称"
              v-model="form.name"
            />
          </a-form-model-item>
          <a-form-model-item
            label="潘通色"
          >
            <a-input
              placeholder="请输入潘通色"
              v-model="form.pantoneColor"
            />
          </a-form-model-item>
          <a-form-model-item
            label="颜色类型"
            prop="type"
          >
            <a-select
              v-model="form.type"
              placeholder="请选择颜色类型"
            >
              <a-select-option v-for="item,i in colorType" :key="i" :value="item.code" >
               {{item.title}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            label="价格分组"
          >
            <a-input
              placeholder="请输入价格分组"
              v-model="form.priceGroup"
            />
          </a-form-model-item>
          <!-- <a-form-model-item
            label="颜色状态"
            prop="status"
          >
            <a-select
              v-model="form.status"
              placeholder="请选择状态"
            >
              <a-select-option v-for="item,i in colorStatus" :key="i" :value="item.code" >
               {{item.title}}
              </a-select-option>
              
            </a-select>
          </a-form-model-item> -->
          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col
                :span="16"
                :offset="18"
                class="info-action"
              >
                <a-button @click="reset">
                  重置
                </a-button>
                <a-button
                  :style="{ marginLeft: '8px' }"
                  type="primary"
                  @click="onSubmit"
                  :loading="loading"
                >
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  components: {},

  props: {
    materialColorId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-material/',
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      colorType:[{code:10,title:'辅料'},{code:20,title:'面料'},{code:30,title:'通用'}],
      colorStatus:[{code:10,title:'启用'},{code:20,title:'停用'},{code:30,title:'失效'}],
      form: {
        name: '',
        code: '',
        priceGroup: '',
        pantoneColor:'',
        type: undefined,
        status: undefined
      },
      rules: {
        code: [{ required: true, message: '请输入颜色编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入颜色名称', trigger: 'blur' }],
        priceGroup: [{ required: true, message: '请输入价格分组', trigger: 'blur' }],
        type: [{ required: true, message: '请选择颜色类型', trigger: 'change' }],
        status: [{ required: true, message: '请选择颜色状态', trigger: 'change' }]
      },
      loading: false
    }
  },

  created() {
    const { materialColorId } = this.$props
    if (materialColorId) {
      this.formTile = '编辑'
      this.getDetail()
    } else {
      this.formTile = '新增'
      if(localStorage.getItem('materialColorType')){
      this.form.type = Number(localStorage.getItem('materialColorType'))
    }
    if(localStorage.getItem('materialColorPriceGroup')){
      this.form.priceGroup = localStorage.getItem('materialColorPriceGroup')
    }
    }
    
  
  },
  mounted() {},
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    getDetail() {
      const params = {
        materialColorId:this.materialColorId
      }
      try {
        postAction(`${this.urlKey}material/color/info`, params).then(res => {
          if (res.code == 200) {
            this.form = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取详情失败！')
      } 
    },
    submit() {
      const params = JSON.parse(JSON.stringify(this.form))
      params.jobNumber = this.jobNumber
      if(this.materialColorId){
        params.materialColorId = this.materialColorId
      }
      const FNCName = this.materialColorId ? `${this.urlKey}material/color/update` : `${this.urlKey}material/color/save`
      try {
        postAction(FNCName, params).then(res => {
          if (res.code == 200) {
            this.$message.success(this.materialColorId ?'编辑成功！':'新增成功！')
            localStorage.setItem('materialColorType', this.form.type)
            localStorage.setItem('materialColorPriceGroup', this.form.priceGroup)
            this.reset()
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.ml-20 {
  margin-left: 20px;
}
</style>